<template>
	<div class="decorate-goodsSales"
    :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'" v-if="tplItemData.title">
    <div class="goods-sales-box">
      <!-- 倒计时 -->
      <section class="act-seckill-goods" v-if="tplItemData.status != 2">
        <!-- 距离活动结束 -->
				<section class="act-count-down" v-if="tplItemData.other_status == 1">
          <p>距离结束时间还剩&nbsp;</p>
					<count-down  background="#333333" :actEndTime="tplItemData.end" @finish="actFinish"></count-down>
				</section>
        <!-- 距离活动开始 -->
        <section class="act-count-down" v-else>
          <p>距离开始时间还剩&nbsp;</p>
					<count-down  background="#333333" :actEndTime="tplItemData.start" @finish="actStart"></count-down>
				</section>
			</section>
      <section class="act-img-box">
        <a href="javascript:;" @click="openLink(tplItemData.link, tplItemData.item_id)" class="act-img">
          <img
            :src="tplItemData.is_compress == 1 ?`${tplItemData.pic}480x480`:tplItemData.pic"
            alt
          />
          <b class="sold-out" v-show="isShowFinish">已结束</b>
          <!-- 已售罄 -->
          <b v-if="tplItemData.is_sell_out == 1" class="sold-out">已售罄</b>
        </a>
        <i class="act-status">{{tplItemData.act_status}}</i>
      </section>
      <section class="act-goods-info">
        <p class="title"><span class="fontZiy" v-if="tplItemData.is_self_support == 1">自营</span>{{tplItemData.title}}</p>
        <p class="tip-txt">抢完恢复原价{{tplItemData.original_price}}元</p>
        <section class="act-info-bottom">
          <div class="act-status-price">{{tplItemData.act_status_price}}</div>
          <div class="act-price" v-html="scaleGoodsPriceFn(tplItemData.price)"></div>
          <div class="act-ori-price"><s>&yen;{{tplItemData.original_price}}</s></div>
        </section>	
      </section>
    </div>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
  import { scaleGoodsPrice } from '@/utils/index'
  import { openPage } from '@/utils/utils'
  import countDown from '@/components/countDown/index'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    components: {
      countDown
    },
    props: {
      tplItemData: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        isShowFinish: false
      }
    },
    methods: {
      openLink(link, item){
        openPage(`${link}&item_id=${item}`)
      },
      actStart() {
        this.tplItemData.other_status = 1
      },
      actFinish() {
        this.isShowFinish = true
      },
      /**
       * 商品价格 整数放大
       */
      scaleGoodsPriceFn(price, className) {
        return scaleGoodsPrice(price, className)
      }
    },
    created() {
      // // console.log(this.tplItemData)
    }
  })
</script>

<style lang="scss">
@import "src/styles/mixin";
.goods-sales-box{
  border-radius: 12px;
  background: #fff;
  padding: 20px;
  .act-count-down{
    padding: 17px 0 28px;
    display: flex;
    align-items: center;
    p{
      font-size: 26px;
    }
  }
  .act-img-box{
    position: relative;
    .act-img{
      display: block;
      position: relative;
      padding-top: 100%;
      overflow: hidden;
      img{
        position: absolute;
        top: 0;
        width: 100%;
      } 
      .sold-out{
        position:absolute;
        top: 20px;
        left: -46px;
        width:180px;
        height:50px;
        line-height:50px;
        transform:rotate(-45deg);
        font-size:24px;
        text-align:center;
        color:#fff;
        background:#000;
        opacity: 0.5;
      }
    }
    .act-status{
      position: absolute;
      bottom: -70px;
      right: 40px;
      width: 96px;
      height: 100px;
      color: #fff;
      font-size: 28px;
      padding: 10px 16px;
      text-align: center;
      word-wrap: break-word;
      word-break: normal;
      line-height: 36px;
      overflow: hidden;
      box-sizing: border-box;
      background: url(https://img.wifenxiao.com/h5-wfx/images/diy/goods/act_icon.png) center/cover no-repeat;
    }
  }
  .act-goods-info{
    .title{
      @include lineClamp(28px,38px,1);
      margin-top: 15px;
    }
    .tip-txt{
      color: #999;
      margin-top: 17px;
    }
    .act-info-bottom{
      padding: 17px 0 12px;
      display: flex;
      align-items: center;
      .act-status-price{
        padding: 0 10px;
        height: 36px;
        line-height: 36px;
        color: #fff;
        background: #F21228;
        margin-right: 15px;
      }
      .act-ori-price{
        color:#999999;
        font-size: 22px;
        margin-left: 10px;
      }
    }
  }
}
</style>
